<template>
  <div class="salaryMan">
    <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 5 }">
      <a-card title="工资配置">
        <a-row :gutter="24">
          <a-col :lg="3" :md="8" :sm="12">
            <a-input class="iipt" addonBefore="底 薪" v-model="sal_base" />
          </a-col>
          <a-col :lg="3" :md="8" :sm="12">
            <a-input class="iipt" addonBefore="0-1w" v-model="sal_rank1"/>
          </a-col>
          <a-col :lg="3" :md="8" :sm="12">
            <a-input class="iipt" addonBefore="1w-2w" v-model="sal_rank2"/>
          </a-col>
          <a-col :lg="3" :md="8" :sm="12">
            <a-input class="iipt" addonBefore="2w-3w" v-model="sal_rank3"/>
          </a-col>
          <a-col :lg="3" :md="8" :sm="12">
            <a-input class="iipt" addonBefore=" 3w+ " v-model="sal_rank4"/>
          </a-col>
          <a-col :lg="3" :md="8" :sm="12">
            <a-input class="iipt" addonBefore=" N+1 " v-model="sal_add" />
          </a-col>
        </a-row>
        <a-divider orientation="left" style="color:#777">组长提成</a-divider>
        <a-row :gutter="24">
          <a-col :lg="3" :md="8" :sm="12">
            <a-input class="iipt" addonBefore="0-10w" v-model="sal_gro1"/>
          </a-col>
          <a-col :lg="3" :md="8" :sm="12">
            <a-input class="iipt" addonBefore=" 10w+ " v-model="sal_gro2"/>
          </a-col>
          <a-col :lg="3" :md="8" :sm="12">
            <a-input class="iipt" addonBefore=" NO.1" v-model="sal_groNo1"/>
          </a-col>
          <a-col :lg="3" :md="8" :sm="12">
            <a-button class="iipt" type="primary" @click="goAdd">设置</a-button>
          </a-col>
        </a-row>
      </a-card>
    </a-skeleton>
    <a-card title="工资数据" style="margin-top:20px">
      <div slot="extra">
        <a-select defaultValue="2020-04" style="width: 180px" @change="dateChange">
          <a-select-option value="2020-04">2020-04</a-select-option>
          <a-select-option value="2020-05">2020-05</a-select-option>
          <a-select-option value="2020-06" >2020-06</a-select-option>
          <a-select-option value="2020-07">2020-07</a-select-option>
        </a-select>
      </div>
      <a-table
        :loading="salaryLoading"
        :columns="columns"
        :dataSource="salaryList"
        :rowKey="salaryList => salaryList.user"
      >
        <!-- <div slot="groupId" slot-scope="groupId">
          <a @click="openDialog(groupId)">查看详情</a>
        </div> -->
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { setWages, getWagesList, getWagesConf } from '@/api/wages'

const columns = [
  {
    title: '月份',
    dataIndex: 'month'
  },
  {
    title: '用户',
    dataIndex: 'user'
  },
  {
    title: '职位',
    dataIndex: 'position'
  },
  {
    title: '工资',
    dataIndex: 'money'
  }
]
export default {
  name: 'SalaryMan',
  data () {
    return {
      skeLoading: true,
      time: '2020-04',
      sal_base: '',
      sal_rank1: '',
      sal_rank2: '',
      sal_rank3: '',
      sal_rank4: '',
      sal_add: '',
      sal_gro1: '',
      sal_gro2: '',
      sal_groNo1: '',
      salaryLoading: false,
      columns,
      salaryList: [
        // {
        //   user: '张三',
        //   month: '2020-4-6',
        //   position: '经理',
        //   money: '100000'
        // }
      ]
    }
  },

  computed: {

  },
  created () {
    this.getWagesList(this.time)
    this.getWagesConf()
  },
  mounted () {

  },
  methods: {
    getWagesConf () {
      getWagesConf({})
        .then(res => {
          // console.log('res', res.result)
          this.sal_base = res.result.sal_base
          this.sal_rank1 = res.result.sal_rank1
          this.sal_rank2 = res.result.sal_rank2
          this.sal_rank3 = res.result.sal_rank3
          this.sal_rank4 = res.result.sal_rank4
          this.sal_add = res.result.sal_add
          this.sal_gro1 = res.result.sal_gro1
          this.sal_gro2 = res.result.sal_gro2
          this.sal_groNo1 = res.result.sal_groNo1
        })
        .catch(() => {
          console.log('null')
        })
    },
    getWagesList (val) {
      this.salaryLoading = true
      getWagesList({
        time: val
      })
        .then(res => {
          this.skeLoading = false
          // console.log('res', res)
          this.salaryList = res.result
          this.salaryLoading = false
        })
        .catch(() => {
          this.salaryLoading = false
          this.skeLoading = false
          console.log('null')
        })
    },

    goAdd () {
      setWages(
        {
          sal_base: this.sal_base,
          sal_rank1: this.sal_rank1,
          sal_rank2: this.sal_rank2,
          sal_rank3: this.sal_rank3,
          sal_rank4: this.sal_rank4,
          sal_add: this.sal_add,
          sal_gro1: this.sal_gro1,
          sal_gro2: this.sal_gro2,
          sal_groNo1: this.sal_groNo1
        }
      ).then(res => {
        this.$message.info('设置成功!')
      }).catch(err => {
        console.log(err)
      })
    },
    dateChange (val) {
      // console.log(val)
      //   this.time = val
      this.getWagesList(val)
    }
  }
}
</script>
